<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./center.css" rel="stylesheet">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <!-- template标签：用于定义组件的模板，组件使用template: "#id"的方式选择模板 -->
    <!-- 板块导航栏 -->
    <template id="plant-header">
        <header class="plant-header">
            <ul class="plant-header-nav">
                <li v-for="(item,idx) in listData" :class="index == idx ? 'active' : '' ">
                    <a @click="handleClick(idx)">{{item}}</a>
                </li>
            </ul>
            <a class="read-more">阅读更多</a>
        </header>
    </template>
    <!-- 左侧轮播图 -->
    <template id="left-swiper">
        <figure class="view-box">
            <ul class="image-box" :style="'transform: translate(' + transform + 'px);'">
                <li v-for="item in images" :style="'background-image: url(' + item + ')'">
                </li>
            </ul>
        </figure>
    </template>
    <!-- 新闻列表 -->
    <template id="left-list">
        <ul class="left-list">
            <li v-for="item in listData">
                <a :title="item">{{item}}</a>
            </li>
        </ul>
    </template>
    <main id="app">
        <div class="center-box">
            <aside class="plant-box1">
                <!-- 使用标签属性，向子组件传参 -->
                <plant-header @change-idx="handleChangeIdx"></plant-header>
                <section class="center-left">
                    <!-- 向子组件动态传参 -->
                    <left-swiper :images="listData[index].images"></left-swiper>
                    <left-list :list-data="listData[index].listData"></left-list>
                </section>
            </aside>
        </div>
    </main>
</body>
<script src="../vue.js"></script>
<script src="./center-components.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data() {
            return {
                listData: [
                    {
                        images: [
                            "https://notecdn.yiban.io/cloud_res/1128126793/imgs/22-9-4_06:21:55.017_91644.jpeg",
                            "https://mmbiz.qpic.cn/mmbiz_png/dSP1K6sDCib28r2Hd7tUsZlXh1iaUfYIKRrCPz1FPe9adfDDiaW5DHahJj1pn9gREFMn05XBSJrbT3AlPFJx481dA/0?wx_fmt=png",
                            "https://notecdn.yiban.io/cloud_res/1128126793/imgs/22-8-31_01:20:32.559_75234.jpeg",
                            "https://notecdn.yiban.io/cloud_res/1128126793/imgs/22-8-22_02:47:59.563_90134.jpeg",
                        ],
                        listData: [
                            "同心战“疫”，共克时艰，他们显担当！", "关于2022级新生延期开学的紧急通知", "“爱心志愿者”+1，浙江金融职业学院章洪教授来啦！", "贵州盛华职业学院召开关于做好2022年度秋季学期工作部署暨教职工职业素养与业务技能培训启动会", "盛华学子丨郑玉洪：岁月可回眸，奋斗无止境", "招生季 | 贵州盛华职业学院2022年普通高考网上补报志愿", "盛华学子丨曹杰：青春因努力奋斗而出彩", "大咖齐聚盛华学院，精彩授课引师生点赞", "访企拓岗促就业，校企合作再深化", "盛华新闻丨媒体记者进校园，学生直呼收获多"
                        ]
                    },
                    {
                        listData: [
                            "贵州盛华职业学院第一党支部开展党风廉政教育主题党日活动",
                            "贵州盛华职业学院党委组织召开2022年第十次党委（扩大）会",
                            "贵州盛华职业学院党委召开理论学习中心组2022年第3次集中学习研讨会",
                            "贵州盛华职业学院党委组织召开 2022年第八次党委会",
                            "贵州盛华职业学院组织开展贯彻习近平 法治思想教育专题课",
                            "贵州盛华职业学院举办学习宣传贯彻省第十三次党代会精神宣讲会",
                            "贵州盛华职业学院机关第一党支部召开2021年度组织生活会",
                            "惠水县委书记郑绍峰赴我校开展党的十九届六中全会和省委十二届十次全会精神宣讲",
                            "党委书记邓维实：深入贯彻十九届六中全会精神，扎实推动学校教育高质量发展",
                            "贵州盛华职业学院召开“传承红色基因 弘扬伟大精神”专题宣讲会"
                        ],
                        images: [
                            'https://zy.forerunnercollege.com/so-165908245061359',
                            'https://zy.forerunnercollege.com/so-165908102888843',
                            'https://zy.forerunnercollege.com/so-165908036330638',
                            'https://zy.forerunnercollege.com/so-165908021249536'
                        ]
                    },

                    {
                        images: [
                            "file:///C:Users%C2%ADMINI~1ppDataLocalTempksohtml8360wps4.png",
                            "https://zy.newktang.com/16365168366351",
                            "http://www.forerunnercollege.com/UpLoadFile/2014093069446369.jpg",
                            "https://zy.newktang.com/16329849859281"
                        ],
                        listData: [
                            "贵州盛华职业学院关于端午节放假安排及假期前后校园安全和疫情防控工作的通知", "贵州盛华职业学院关于“五一”劳动节放假安排及假期前后校园安全和疫情防控工作的通知", "关于中共贵州盛华职业学院委员会2021年度“优秀党员”“优秀党务工作者”“优秀基层 党组织”推荐评选", "贵州盛华职业学院毕业生调查通知", "贵州盛华职业学院教学实训楼及学生宿舍门框建设工程竞争性谈判采购公告", "关于实行教学行政秋季作息时间的通知", "贵州盛华职业学院关于2014年五一劳动节放假的通知", "省招生考试院关于做好2012年中等职业学校推荐优秀业生进入高职（专科）院校学习工作的通知", "学校筹备组2011年春节放假通知", "学校筹备组“中秋、国庆”两节休假通知"
                        ]
                    },
                    {
                        images: [
                            "https://zy.forerunnercollege.com/so-16593247496191",
                            "https://zy.forerunnercollege.com/so-16588181843402",
                            "https://zy.forerunnercollege.com/so-165830655275422",
                            "https://zy.forerunnercollege.com/so-165830634349715"

                        ],
                        listData: [
                        "【健康与管理学院】健康与管理学院召开人才培养方案专题研讨会", "【唐人坊非遗学院】2022年贵州盛华职业学院非遗学院举办招生宣讲会", "【唐人坊非遗学院】“对话青椒，助力成长” ——贵州盛华职业学院非遗学院召开青年教师座谈交流会", "【唐人坊非遗学院】贵州省工会系统首家工匠创新联盟正式成立", "【互联网营销学院】开展MT实训项目交流会", "【盲人学院】盲人学院举行“感恩盛华，未来可期”告别晚会", "【数字经济学院】新老交棒，任重道远丨学院数字经济学院举行“2021——2022年度总结暨换届表彰大会", "【会计学院】会计学院教师积极参加学校举办的青年教师技能大赛", "【健康与管理学院】访企拓岗——康养专业教师在行动", "【健康与管理学院】访企拓岗——康养专业教师在行动" 
                        ]
                    },
                ],
                index: 0,
                // 新闻列表数据

            }
        },
        methods: {
            // 处理自定义事件：更改idx
            handleChangeIdx(idx) {
                this.index = idx;
            }
        }
    })

</script>

</html>